<script lang="ts" setup>
  import dayjs from 'dayjs';
  import { onMounted, ref } from 'vue';
  import useTable from '@/hooks/table';
  import { CmsArticleSearch, CmsComment } from '@/types/cms';
  import { getCommentList, approveComment } from '@/api/cms';
  import { Modal } from '@arco-design/web-vue';
  import SearchForm from './search-form.vue';

  const { pager, loading, total, list } = useTable<CmsComment>();

  const searchParams = ref<Partial<CmsArticleSearch>>({});

  const getData = async () => {
    loading.value = true;
    try {
      const res = await getCommentList({
        ...pager.value,
        ...searchParams.value,
      });
      total.value = res?.data?.data?.total || 0;
      list.value = (res?.data?.data?.list || []).map((item) => {
        return {
          ...item,
        };
      });
    } finally {
      loading.value = false;
    }
  };

  const handleSearch = (params: Partial<CmsArticleSearch>) => {
    pager.value.pageIndex = 1;
    searchParams.value = params;
    getData();
  };

  const handlePageIndexChanged = (pageIndex: number) => {
    pager.value.pageIndex = pageIndex;
    getData();
  };

  const approveRecord = (comment: CmsComment) => {
    Modal.confirm({
      title: '确认通过审核？',
      content: '',
      async onBeforeOk() {
        await approveComment(comment.id, 1);
        getData();
      },
    });
  };

  onMounted(() => {
    getData();
  });
</script>

<template>
  <div style="padding: 20px">
    <a-row :gutter="[20, 20]">
      <a-col>
        <a-card title="评论管理" :bordered="false">
          <SearchForm @submit="handleSearch" />
        </a-card>
      </a-col>

      <a-col>
        <a-card :bordered="false">
          <a-table
            :bordered="{ cell: true }"
            :data="list"
            :loading="loading"
            :pagination="{
              total,
              current: pager.pageIndex,
              pageSize: pager.pageSize,
              showTotal: true,
              showJumper: true,
            }"
            @page-change="handlePageIndexChanged"
          >
            <template #columns>
              <a-table-column title="内容" data-index="content">
              </a-table-column>
              <a-table-column
                title="内容"
                data-index="cmsArticle.articleTitle"
                :width="240"
              />
              <a-table-column
                title="用户"
                data-index="user.nickname"
                :width="240"
              />
              <a-table-column
                title="发表时间"
                data-index="publishTime"
                :width="180"
              >
                <template #cell="{ record }">
                  {{ dayjs(record.gmtCreate).format('YYYY/MM/DD HH:mm:ss') }}
                </template>
              </a-table-column>
              <a-table-column title="状态" data-index="gmtCreate" :width="100">
                <template #cell="{ record }">
                  <a-tag :color="record.state ? 'green' : 'blue'">
                    {{ record.state ? '已通过' : '待审核' }}
                  </a-tag>
                </template>
              </a-table-column>
              <a-table-column title="操作" :width="100" align="center">
                <template #cell="{ record }">
                  <a-link
                    :disabled="record.state === 1"
                    @click="approveRecord(record)"
                  >
                    通过审核
                  </a-link>
                </template>
              </a-table-column>
            </template>
          </a-table>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
